<template>
  <a-layout class="layout">
    <a-layout-sider collapsed :collapsed-width="64">
      <Brand/>
      <Nav/>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="layout-header">
        <a-flex justify="space-between" align="center">
          <a-space>
            <a-button type="text" class="ant-btn-icon-only"><menu-outlined/></a-button>
            <a-divider type="vertical"/>
            <use-breadcrumb/>
          </a-space>
          <HeaderRight/>
        </a-flex>
      </a-layout-header>
      <a-layout-content class="layout-content">
        <router-view/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import Brand from "./components/Brand.vue";
import Nav from "./components/Nav.vue";
import HeaderRight from "./components/HeaderRight.vue";
import UseBreadcrumb from "@/components/UseBreadcrumb.vue";
import {MenuOutlined} from "@ant-design/icons-vue";

</script>

<style scoped>
.layout {
  min-height: 100vh;
  height: 100vh;
}

.layout-header {
  background-color: #fff;
  height: 52px;
  line-height: 52px;
  padding: 0 24px;
  align-items: center;
  box-shadow: 0 1px 0 #f0f0f0;
  z-index: 101;
  position: relative;
}

.layout-content {
  height: calc(100vh - 52px);
  overflow-y: auto;
}
</style>